<template>
  <div class="people base-main">
    <div class="tip-view">
      <p>首页 / 权限管理 / 菜单管理</p>
    </div>
    <!-- 搜索视图 -->
    <div ref="searchv" class="search-view">
      <el-input v-model="searchInfo.name" placeholder="请输入菜单名" />
      <el-button
        class="btnRed"
        type="danger"
        @click="searchAction"
      >查询</el-button>
      <el-button type="warning" @click="visible = true">新增+</el-button>
    </div>
    <!-- 菜单列表 -->
    <div class="list">
      <simpleTable
        :fix-height="true"
        :table-h="tableH"
        :is-show-serial-number="false"
        header-bg-color="#f5f7fa"
        :is-show-operation="true"
        :table-data="menuList"
        :props="props"
      >
        <template #childs="{ data }">
          <el-tag
            v-for="item in data.childs"
            :key="item.code"
            closable
            :disable-transitions="false"
            type="warning"
            size="medium"
            style="margin-left:10px"
            @close="handleClose(item)"
          >{{ item.name }}</el-tag>
        </template>
        <template #operation="{ data }">
          <a
            class="linkRed"
            href="javascript:;"
            @click="modifiyAction(data)"
          >修改</a>
          <span style="color: #f0f2f5"> | </span>
          <a href="javascript:;" @click="deleteAction(data)">删除</a>
        </template>
      </simpleTable>
    </div>
    <!-- 新增菜单权限 -->
    <a-modal
      title="新增权限"
      :visible="visible"
      :confirm-loading="confirmLoading"
      ok-text="确定"
      cancel-text="取消"
      ok-type="danger"
      @ok="onSubmit"
      @cancel="visible = false"
    >
      <el-form :model="form">
        <el-form-item label="一级菜单" :label-width="formLabelWidth">
          <el-select v-model="form.level1" style="margin-bottom:0" placeholder="请选择一级菜单">
            <el-option
              v-for="item in firstMenu"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
          <el-button type="danger">新增</el-button>
        </el-form-item>
        <el-form-item label="二级菜单" :label-width="formLabelWidth">
          <el-input
            v-model="form.level2"
            style="width: 240px"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="二级菜单code" :label-width="formLabelWidth">
          <el-input
            v-model="form.level2code"
            style="width: 240px"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="三级菜单（包含按钮）" :label-width="formLabelWidth">
          <el-tag
            closable
            :disable-transitions="false"
            type="warning"
            size="medium"
            style="margin-left:10px"
          >新增</el-tag>
          <el-tag
            closable
            :disable-transitions="false"
            type="warning"
            size="medium"
            style="margin-left:10px"
          >删除</el-tag>
          <el-button type="danger" style="margin-left:10px">新增</el-button>
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>
<script>
import simpleTable from './../../components/simpleTable'
export default {
  name: 'MenuControl',
  components: {
    simpleTable
  },
  data() {
    return {
      tableH: 0,
      visible: false,
      confirmLoading: false,
      searchInfo: {
        name: ''
      },
      props: [
        {
          prop: 'level1',
          label: '一级菜单'
        },
        {
          prop: 'level2',
          label: '二级菜单'
        },
        {
          prop: 'childs',
          label: '三级菜单（包含按钮)'
        }
      ],
      firstMenu: [
        { name: '首页', code: '1' },
        { name: '产品管理', code: '2' },
        { name: '权限管理', code: '3' },
        { name: '错误页', code: '4' },
        { name: '个人中心', code: '5' }
      ],
      menuList: [
        {
          level1: '首页',
          levelcode1: '1',
          level2: '首页',
          levelcode2: '1-1'
        },
        {
          level1: '产品管理',
          levelcode1: '2',
          level2: '产品列表',
          levelcode2: '2-1',
          childs: [
            { name: '增加', code: '2-1-1' },
            { name: '删除', code: '2-1-2' }
          ]
        },
        {
          level1: '权限管理',
          levelcode1: '3',
          level2: '用户管理',
          levelcode2: '3-1',
          childs: [
            { name: '增加', code: '2-1-1' },
            { name: '删除', code: '2-1-2' }
          ]
        },
        {
          level1: '权限管理',
          levelcode1: '3',
          level2: '角色管理',
          levelcode2: '3-2',
          childs: [
            { name: '增加', code: '3-2-1' },
            { name: '删除', code: '3-3-2' },
            { name: '查询', code: '3-2-3' }
          ]
        },
        {
          level1: '权限管理',
          levelcode1: '3',
          level2: '菜单管理',
          levelcode2: '3-3',
          childs: [
            { name: '增加', code: '3-2-1' },
            { name: '删除', code: '3-3-2' }
          ]
        },
        {
          level1: '错误页',
          levelcode1: '4',
          level2: '401',
          levelcode2: '4-1'
        },
        {
          level1: '错误页',
          levelcode1: '4',
          level2: '403',
          levelcode2: '4-2'
        },
        {
          level1: '错误页',
          levelcode1: '4',
          level2: '404',
          levelcode2: '4-3'
        },
        {
          level1: '个人中心',
          levelcode1: '5',
          level2: '个人设置',
          levelcode2: '5-1',
          childs: [
            { name: '修改资料', code: '5-1-1' }
          ]
        }
      ],
      form: {
        level1: '',
        level2: '',
        level2code: '',
        level3: ''
      },
      formLabelWidth: '170px'
    }
  },
  computed: {},
  watch: {
    '$store.state.setting.refresh': {
      handler: function(newVal, oldVal) {
        if (newVal) {
          alert('刷新菜单管理页')
        }
      }
    }
  },
  created() {},
  mounted() {
    this.caculateHeight()
  },
  methods: {
    caculateHeight() {
      this.$nextTick(() => {
        const windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        const topHeight =
          64 + 54 + 20 + 56 + 40 + this.$refs.searchv.clientHeight
        const tableH = windowHeight - topHeight - 20
        this.tableH = tableH
        console.log(
          '打印搜索模块高度----',
          windowHeight,
          this.$refs.searchv.clientHeight,
          tableH
        )
      })
    },
    searchAction() {
      console.log('打印查询参数---', this.searchInfo)
    },
    onSubmit() {
      this.confirmLoading = true
      setTimeout(() => {
        this.confirmLoading = false
        this.visible = false
      }, 500)
      console.log('打印添加确定按钮数据----', this.form)
    },
    modifiyAction(row) {
      console.log('打印修改参数----', row)
    },
    deleteAction(row) {
      console.log('打印删除参数----', row)
    },
    handleClose(item) {
      this.$confirm('确定删除该权限么？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除三级菜单权限----', item)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.people {
  .iconImg {
    width: 20px;
    height: 20px;
  }
}
</style>
